<template>
  <t-transfer
      v-model="targetValue"
      theme="primary"
      :data="list"
      :checked-value="checkedValue"
      :pagination="pagination"
      :on-page-change="handlePageChange"
  >

  </t-transfer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { TransferProps } from 'tdesign-vue-next';
const list: TransferProps['data'] = [
  {
    "value": 2841,
    "label": "PT_SZTD 深圳腾大接待组级别-2841"
  },
  {
    "value": 2849,
    "label": "PT_SZTD 深圳腾大B1F-B3F19观光梯级别-2849"
  },
  {
    "value": 2877,
    "label": "PT_QG_WH 武汉在线教育子公司公共门-2877"
  },
  {
    "value": 2965,
    "label": "PT_QG_HZ 杭州公共门-2965"
  },
  {
    "value": 2967,
    "label": "PT_BJXA 北京雄安市民服务中心所有门-2967"
  },
  {
    "value": 2985,
    "label": "系统授权_PW_160_TX 全国公共门-2985"
  },
  {
    "value": 2995,
    "label": "PT_CDA 成都A楼商业服务区门禁-2995"
  },
  {
    "value": 3003,
    "label": "FK_BJZB 北京总部闸机所有门"
  },
  {
    "value": 3015,
    "label": "PT_HKTG 香港太古公共门"
  },
  {
    "value": 3031,
    "label": "PT_SZKXD1 深圳科兴D1栋所有门(不含经理室)"
  },
  {
    "value": 3037,
    "label": "PT_SZKXC 深圳科兴C栋所有门(不含经理室)"
  },
  {
    "value": 3097,
    "label": "FK_SZKXC 深圳科兴C闸机所有门"
  },
  {
    "value": 3101,
    "label": "PT_TJ 天津所有门"
  },
  {
    "value": 3134,
    "label": "PT_QG_CSJM 长沙金茂公共门"
  },
  {
    "value": 3135,
    "label": "PT_CSJM 长沙金茂所有门"
  },
  {
    "value": 3141,
    "label": "系统授权_BS_TX 全国公共门"
  },
  {
    "value": 3166,
    "label": "PT_QG_DL 大连公共门"
  },
  {
    "value": 3167,
    "label": "PT_DL 大连所有门"
  },
  {
    "value": 3193,
    "label": "PT_SZKXC 深圳科兴C栋11楼门禁级别"
  },
  {
    "value": 3239,
    "label": "PT_QG_NJ 南京公共门"
  }
];

const targetValue = ref([]);
const checkedValue = ref([]);
const pagination = ref<TransferProps['pagination']>([
  {
    pageSize: 10,
    defaultCurrent: 1,
  },
  {
    pageSize: 5,
    defaultCurrent: 1,
  },
]);
const handlePageChange: TransferProps['onPageChange'] = (...args) => {
  console.log('handlePageChange', args);
};
</script>
